// Variables to store original dimensions and aspect ratio
var originalMouseX = null;
var originalMouseY = null;
var originalWidth = null;
var originalHeight = null;
var aspectRatio = null;

// Download Function
function download() { 
    var dt = canvas.toDataURL(mimeType); 
    $('#downloadresizedimage').attr('download', originalFileName.replace('.', '-' + $('#image-width').val() + 'x' + $('#image-height').val() + '.')); 
    this.href = dt; 
    $('#social').fadeIn(5000); 
};
downloadresizedimage.addEventListener('click', download, false);

// Mouse Down Event
$('#image-display').mousedown(function (e) { 
    originalMouseX = e.pageX;
    originalMouseY = e.pageY;
    originalWidth = parseInt($('#image-width').val(), 10);
    originalHeight = parseInt($('#image-height').val(), 10);
    aspectRatio = originalWidth / originalHeight;
});

// Mouse Move Event
$('#image-display').mousemove(function (e) { 
    if (originalMouseX !== null && originalMouseY !== null) {
        var currentMouseX = e.pageX;
        var currentMouseY = e.pageY;
        
        var differenceInWidth = originalMouseX - currentMouseX;
        var differenceInHeight = originalMouseY - currentMouseY;

        // Determine whether to adjust width or height based on mouse movement
        if (Math.abs(differenceInWidth) > Math.abs(differenceInHeight)) {
            // Adjust width and maintain aspect ratio
            var newWidth = originalWidth - differenceInWidth;
            var newHeight = Math.round(newWidth / aspectRatio);
            $('#image-width').val(newWidth);
            $('#image-height').val(newHeight);
        } else {
            // Adjust height and maintain aspect ratio
            var newHeight = originalHeight - differenceInHeight;
            var newWidth = Math.round(newHeight * aspectRatio);
            $('#image-height').val(newHeight);
            $('#image-width').val(newWidth);
        }

        refreshImage();
    }
});

// Mouse Up Event
$('#image-display').mouseup(function (e) { 
    originalMouseX = null;
    originalMouseY = null;
    originalWidth = null;
    originalHeight = null;
    aspectRatio = null;
});

// Refresh Image Function
function refreshImage() { 
    var img = $('#image-display'); 
    var imageWidth = parseInt($('#image-width').val(), 10);
    var imageHeight = parseInt($('#image-height').val(), 10);

    img.show(); 

    var oldWidth = originalImageObject.width; 
    var oldHeight = originalImageObject.height; 

    // Show or hide download button based on dimension changes
    if (oldWidth !== imageWidth || oldHeight !== imageHeight) { 
        $('#downloadresizedimage').show(); 
    } else { 
        $('#downloadresizedimage').hide(); 
    } 

    // Update aspect ratio
    aspectRatio = oldWidth / oldHeight;

    // Set new dimensions maintaining aspect ratio if necessary
    // Here, we assume both width and height are provided and may not maintain aspect ratio
    // If you want to maintain aspect ratio based on one input, adjust accordingly

    canvas = $('#image-canvas')[0]; 
    canvas.setAttribute('width', imageWidth); 
    canvas.setAttribute('height', imageHeight); 

    var context = canvas.getContext('2d'); 
    context.drawImage(originalImageObject, 0, 0, canvas.width, canvas.height); 

    // Determine MIME type based on file extension
    if (originalFileName.toLowerCase().indexOf('.jpg') >= 0 || originalFileName.toLowerCase().indexOf('.jpeg') >= 0) { 
        mimeType = 'image/jpeg'; 
    } else if (originalFileName.toLowerCase().indexOf('.bmp') >= 0) { 
        mimeType = 'image/bmp'; 
    } else if (originalFileName.toLowerCase().indexOf('.gif') >= 0) { 
        mimeType = 'image/gif'; 
    } else if (originalFileName.toLowerCase().indexOf('.png') >= 0) { 
        mimeType = 'image/png'; 
    } else if (originalFileName.toLowerCase().indexOf('.tif') >= 0) { 
        mimeType = 'image/tif'; 
    } 

    img.attr('src', canvas.toDataURL(mimeType)); 
} 

// Keyup Event for Width Input
        $("#image-width").on('input', function () {
    var newWidth = parseInt($(this).val(), 10);
    if (jQuery.isNumeric(newWidth) && newWidth > 0) {
        var newHeight = Math.round(newWidth / aspectRatio);
        $('#image-height').val(newHeight);
    }
    refreshImage(); 
}); 

// Keyup Event for Height Input
        $("#image-height").on('input', function () {
    var newHeight = parseInt($(this).val(), 10);
    if (jQuery.isNumeric(newHeight) && newHeight > 0) {
        var newWidth = Math.round(newHeight * aspectRatio);
        $('#image-width').val(newWidth);
    }
    refreshImage(); 
});

// Process File Function
function processFile(blob, fileName) { 
    originalFileName = fileName; 
    var reader = new window.FileReader(); 
    reader.readAsDataURL(blob); 
    reader.onloadend = function () { 
        var base64data = reader.result; 
        $('<img>', { src: base64data }).on('load', function () { 
            $('#image-display').show(); 
            $('#file-drop-zone').addClass('collapsedDropZone');
        $('#image-dimension-container').show();

            originalImageObject = this; 
            var imageWidth = $('#image-width'); 
            var imageHeight = $('#image-height');

            imageWidth.val(originalImageObject.width); 
            imageHeight.val(originalImageObject.height); 

            imageWidth.focus(); 
            imageWidth.select(); 

            aspectRatio = originalImageObject.width / originalImageObject.height;

            refreshImage(); 
        }); 
    } 
} 


            






function replaceAll(find, replace, str) {
    return str.replace(new RegExp(find, 'g'), replace);
}

function beautify(str) {


    var result = '';

    var length = str.length;

    var i = 0;

    var braceCountLeft = 0;
    var braceCountRight = 0;

    var withinQuotes = false;

    while (i < length) {

        var c = str[i];

        if (c == '"' && (i == 0 || c[i - 1] != '\\')) {
            // non-escaped quotes
            withinQuotes = !withinQuotes;
        }

        if (!withinQuotes && (c == '}' || c == '{' || c == ',')) {

            console.log('Start####' + result);

            // look back and remove carriage returns and whitespace that are already there

            var resultIndex = result.length - 1;
            while (resultIndex >= 0 && (result[resultIndex] == ' ' || result[resultIndex] == '\r' || result[resultIndex] == '\n' || result[resultIndex] == '\t')) {

                resultIndex = resultIndex - 1;
                result = result.substr(0, resultIndex + 1);

                console.log('char ' + result[resultIndex] + '-----' + result + 'zzz ' + result.length + ' ' + resultIndex);

            }


            if (c == '{') {
                braceCountLeft++;
                result += c + '\r' + GetTabs(braceCountLeft - braceCountRight);
            } else if (c == '}') {
                braceCountRight++;
                // precede with carriage return
                result += '\r' + GetTabs(braceCountLeft - braceCountRight) + c;
            } else if (c == ',') {
                result += c + '\r' + GetTabs(braceCountLeft - braceCountRight);
            }

            var nextChar = '';

            // advance through whitespace and remove carriage returns that are already there
            while (i < length && (str[i + 1] == ' ' || str[i + 1] == '\r' || str[i + 1] == '\n' || str[i + 1] == '\t')) {
                i++;
            }

        } else {

            result += str[i];

        }


        i++;

    }

    return result;

}

function GetTabs(count) {

    var result = '';

    for (var i = 0; i < count; i++) {
        result += '    ';
    }

    return result;

}